<template>
  <div
    :class="[
             `${classPrefix}`,
             size && `${classPrefix}--${size}`,
             noCustomColor && `${classPrefix}--color-${color}`,
             ghost && `${classPrefix}--ghost`,
             isChecked && 'is-checked'
        ]"
    :style="customStyle"
    @click.stop="handlerClick"
  >
    <span :class="[`${classPrefix}__text`]">
      <slot></slot>
    </span>
    <Icon
      v-if="closable"
      :name="iconType"
      :class="[`${classPrefix}__icon`]"
      :style="iconStyle"
      @click.native.stop="handlerClose"
    ></Icon>
  </div>
</template>

<script>
import Config from "/src/config";
import Icon from "/src/components/icon";
export default {
  name: "Tag",
  props: {
    size: {
      type: String,
      default() {
        return !this.$MONKEY || this.$MONKEY.size === ""
          ? "default"
          : this.$MONKEY.size;
      },
      validator(value) {
        return ["mini", "small", "default", "large"].includes(value);
      },
    },
    closable: Boolean,
    ghost: Boolean,
    checkable: Boolean,
    checked: {
      type: Boolean,
      default: true,
    },
    color: {
      type: String,
      default: "default",
    },
  },
  data() {
    return {
      classPrefix: Config.classPrefix + "-tag",
      isHover: false,
      isChecked: this.checked,
    };
  },
  computed: {
    iconType() {
      return this.isHover ? "error-fill" : "close";
    },
    noCustomColor() {
      return [
        "primary",
        "success",
        "danger",
        "warning",
        "info",
        "default",
        "primary-o",
        "success-o",
        "danger-o",
        "warning-o",
        "info-o",
        "default-o",
      ].includes(this.color);
    },
    customStyle() {
      if (this.noCustomColor) return {};
      if (this.ghost) {
        return {
          "background-color": "transparent",
          color: this.color,
          "border-color": this.color,
        };
      }
      return {
        "background-color": this.color,
        color: "#ffffff",
        "border-color": this.color,
      };
    },
    iconStyle() {
      if (this.noCustomColor) return {};
      if (this.ghost) {
        return {
          color: this.color,
        };
      }
      return {
        color: "#ffffff",
      };
    },
  },
  components: {
    Icon,
  },
  methods: {
    handlerClose() {
      this.$emit("close");
    },
    handlerClick() {
      if (this.checkable) {
        this.isChecked = !this.isChecked;
      }
      this.$emit("click");
    },
  },
  watch: {
    checked: function (newVal) {
      this.isChecked = newVal;
    },
  },
};
</script>
